<template>
  <div class="goods-lable-body" v-loading="initLoading">
    <div class="goods-lable-group">
      <goodsLabelGroup @change="groupChange"></goodsLabelGroup>
    </div>
    <div class="goods-lable-main">
      <el-button
        type="primary"
        @click="createClick(0)"
        v-permission="'store-goods_label-create'"
        >添加标签</el-button
      >
      <!-- 列表 -->
      <el-table class="mt20" :data="lists" row-key="id">
        <el-table-column label="商品标签名称" prop="label_name">
          <template #default="scope">
            <span>{{ scope.row.label_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time">
          <template #default="scope">
            <span class="text-grey fz12">{{ scope.row.create_time }}</span>
          </template></el-table-column
        >
      <el-table-column align="left" label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="createClick(scope.row.id,scope.row.label_name,scope.row.group_id)"
              v-permission="'store-goods_label-update'"
              >编辑</el-button
            >

            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="不用了"
              icon="WarningFilled"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(scope.row.id)"
            >
              <template #reference>
                <el-button
                  link
                  v-permission="'store-goods_label-delete'"
                  type="primary"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="flex end">
        <page :listPage="listPage" @change="pageChange"></page>
      </div>
    </div>
    <createGoodsLabelCreate
      ref="createGoodsLabelCreateRef"
      @success="toInit()"
    ></createGoodsLabelCreate>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, provide, getCurrentInstance } from "vue";
import goodsLabelGroup from "./handle/group.vue";
import createGoodsLabelCreate from "./create.vue";
import { getGoodsLabelList, delGoodsLabel } from "@/api/store/goods_label";
import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";
import { EnumNumberMember } from "@babel/types";

const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const lists = ref<any>([]);

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const searchFrom = ref<any>({
  group_id:-1
})

const groupChange = (id:number) => {
  searchFrom.value.group_id = id
  toInit()
}

const toInit = () => {
  let obj: any = {};
  obj.group_id = searchFrom.value.group_id;
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getGoodsLabelList(obj)
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      setTimeout(() => {
        initLoading.value = false;
      }, 500);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const createGoodsLabelCreateRef = ref<HTMLElement>();

const createClick = (id: number,label:string = '',group:number|string = '') => {
  proxy?.$refs["createGoodsLabelCreateRef"]?.open(id,label,group);
};

const del = (id: number) => {
  delGoodsLabel({
    id,
  })
    .then((res: Result) => {
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInit();
});
</script>

<style scoped>
.goods-lable-body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.goods-lable-group {
  width: 320px;
  height: calc(100% - 42px);
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color-overlay);
  border-radius: 2px;
  padding: 20px;
}
.goods-lable-main {
  width: calc(100% - 420px);
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-bg-color-overlay);
  border-radius: 2px;
  padding: 20px;
}
</style>